<template>
  <view class="filter-container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <uni-icons type="back" size="24"></uni-icons>
      </view>
      <view class="nav-title">筛选</view>
      <view class="nav-right" @click="resetFilter">
        <text>重置</text>
      </view>
    </view>
    
    <!-- 筛选内容区域 -->
    <scroll-view scroll-y class="filter-content">
      <!-- 部门筛选 -->
      <view class="filter-section" v-if="filterType === 'department'">
        <view class="section-title">部门</view>
        <view class="option-list">
          <view 
            class="option-item" 
            v-for="(item, index) in departments" 
            :key="index"
            :class="{ active: selectedDepartment === item }"
            @click="selectDepartment(item)"
          >
            <text>{{ item }}</text>
          </view>
        </view>
      </view>
      
      <!-- 区域筛选 -->
      <view class="filter-section" v-if="filterType === 'area'">
        <view class="section-title">区域</view>
        <view class="option-list">
          <view 
            class="option-item" 
            v-for="(item, index) in areas" 
            :key="index"
            :class="{ active: selectedArea === item }"
            @click="selectArea(item)"
          >
            <text>{{ item }}</text>
          </view>
        </view>
      </view>
      
      <!-- 其他筛选条件 -->
      <view class="filter-section" v-if="filterType === 'filter'">
        <view class="section-title">房源类型</view>
        <view class="option-list">
          <view 
            class="option-item" 
            v-for="(item, index) in houseTypes" 
            :key="index"
            :class="{ active: selectedType === item }"
            @click="selectType(item)"
          >
            <text>{{ item }}</text>
          </view>
        </view>
        
        <view class="section-title">价格区间</view>
        <view class="price-range">
          <input type="number" v-model="minPrice" placeholder="最低价" />
          <text>-</text>
          <input type="number" v-model="maxPrice" placeholder="最高价" />
        </view>
      </view>
    </scroll-view>
    
    <!-- 底部按钮 -->
    <view class="bottom-bar">
      <view class="confirm-btn" @click="confirmFilter">确定</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      filterType: '',
      departments: ['总部', '武汉分部', '北京分部', '上海分部', '广州分部'],
      areas: ['洪山区', '武昌区', '江汉区', '汉阳区', '青山区'],
      houseTypes: ['整租', '合租'],
      selectedDepartment: '',
      selectedArea: '',
      selectedType: '',
      minPrice: '',
      maxPrice: ''
    }
  },
  onLoad(options) {
    // 获取筛选类型
    this.filterType = options.type || 'filter';
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    resetFilter() {
      this.selectedDepartment = '';
      this.selectedArea = '';
      this.selectedType = '';
      this.minPrice = '';
      this.maxPrice = '';
    },
    selectDepartment(item) {
      this.selectedDepartment = item;
    },
    selectArea(item) {
      this.selectedArea = item;
    },
    selectType(item) {
      this.selectedType = item;
    },
    confirmFilter() {
      // 构建筛选参数
      const filterParams = {
        department: this.selectedDepartment,
        area: this.selectedArea,
        type: this.selectedType,
        price: {
          min: this.minPrice,
          max: this.maxPrice
        }
      };
      
      // 返回上一页并传递筛选参数
      uni.$emit('updateFilter', filterParams);
      uni.navigateBack();
    }
  }
}
</script>

<style lang="scss">
.filter-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.nav-bar {
  display: flex;
  align-items: center;
  height: 90rpx;
  background-color: #fff;
  padding: 0 30rpx;
  position: relative;
  
  .nav-left {
    position: absolute;
    left: 30rpx;
    height: 100%;
    display: flex;
    align-items: center;
  }
  
  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
  }
  
  .nav-right {
    position: absolute;
    right: 30rpx;
    height: 100%;
    display: flex;
    align-items: center;
    
    text {
      color: #666;
      font-size: 28rpx;
    }
  }
}

.filter-content {
  flex: 1;
  padding: 20rpx;
}

.filter-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  
  .section-title {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  
  .option-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    
    .option-item {
      padding: 12rpx 24rpx;
      border-radius: 30rpx;
      background-color: #f5f5f5;
      transition: all 0.3s ease;
      
      text {
        font-size: 26rpx;
        color: #666;
      }
      
      &.active {
        background-color: #e6f7ff;
        
        text {
          color: #1890ff;
        }
      }
    }
  }
}

.price-range {
  display: flex;
  align-items: center;
  gap: 20rpx;
  
  input {
    flex: 1;
    height: 80rpx;
    background-color: #f5f5f5;
    border-radius: 8rpx;
    padding: 0 20rpx;
    font-size: 26rpx;
  }
  
  text {
    color: #999;
    font-size: 24rpx;
  }
}

.bottom-bar {
  padding: 20rpx;
  background-color: #fff;
  
  .confirm-btn {
    height: 88rpx;
    background-color: #1890ff;
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #fff;
    font-weight: 500;
    
    &:active {
      opacity: 0.8;
    }
  }
}
</style>